<template>
  <div ref="target" class="box"></div>
  <div>{{ mouse }}</div>
  <div style="margin-top: 100px">是否在元素外部：{{ mouse.isOutside }}</div>
</template>

<script>
export default {
  name: 'UseMouseInElement',
}
</script>
<script setup>
import { useMouseInElement } from '@vueuse/core'
const target = ref(null)
const mouse = reactive(useMouseInElement(target))
</script>

<style scoped>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
